<template>
    <div>
    </div>
</template>

<script setup lang="ts">
import { useVueCesium } from 'vue-cesium'
import type { VcViewerProvider, VcReadyObject } from 'vue-cesium/es/utils/types'

const $vc: VcViewerProvider = useVueCesium()

$vc.creatingPromise.then((readyObj: VcReadyObject) => {

    let viewer = readyObj.viewer
    let Cesium: any = readyObj.Cesium

    // 激光材质类
    function LaserPolylineTrailLinkMaterialProperty(this: any, duration, color) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = new Date().getTime();
    }

    Object.defineProperties(LaserPolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            },
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            },
        },
        color: Cesium.createPropertyDescriptor("color"),
    });

    LaserPolylineTrailLinkMaterialProperty.prototype.getType = function (time: any) {
        return "PolylineTrailLink";
    };

    LaserPolylineTrailLinkMaterialProperty.prototype.getValue = function (
        time: any,
        result: { color?: any; image?: any; time?: any; }
    ) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(
            this._color,
            time,
            Cesium.Color.WHITE,
            result.color
        );
        result.image = Cesium.Material.PolylineTrailLinkImage;
        result.time =
            ((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
    };

    LaserPolylineTrailLinkMaterialProperty.prototype.equals = function (other: { _color: any; }) {
        return (
            this === other ||
            (other instanceof LaserPolylineTrailLinkMaterialProperty &&
                Cesium.Property.equals(this._color, other._color))
        );
    };

    Cesium.LaserPolylineTrailLinkMaterialProperty = LaserPolylineTrailLinkMaterialProperty;
    Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink";
    Cesium.Material.PolylineTrailLinkImage = new URL('./water.png', import.meta.url).href;
    Cesium.Material.PolylineTrailLinkSource =
        "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st;\n\
        vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
        material.alpha = colorImage.a * color.a;\n\
        material.diffuse = (colorImage.rgb + color.rgb) / 2.0;\n\
        return material;}";
    Cesium.Material._materialCache.addMaterial(
        Cesium.Material.PolylineTrailLinkType,
        {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: 20,
                },
                source: Cesium.Material.PolylineTrailLinkSource,
            },
            translucent: function (material: any) {
                return true;
            },
        }
    );

    let dynamicLine = viewer.entities.add({
        id: 'line',
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([117.950543, 31.657815, 117.950704, 31.657879, 117.950543, 31.657815,
                117.951573, 31.657801, 117.952088, 31.657902, 117.953478, 31.658536, 117.953843, 31.658646,
                117.95417, 31.658495, 117.954331, 31.658152, 117.954315, 31.657938, 117.954116, 31.657244,
                117.954111, 31.656554, 117.954111, 31.656554, 117.954111, 31.656554, 117.954111, 31.656554,
                117.953054, 31.655198, 117.950855, 31.653344, 117.95085, 31.653334, 117.949622, 31.653192,
                117.949482, 31.653242, 117.949407, 31.65463, 117.949653, 31.655924, 117.949953, 31.656367,
                117.950409, 31.657381, 117.950474, 31.657691]),
            width: 10,
            material: new Cesium.LaserPolylineTrailLinkMaterialProperty(
                50000, // 速度
                Cesium.Color.RED
            )
        }
    })

    viewer.flyTo(dynamicLine)

})

</script>